<template>
  <div
    :class="[
      'bg-white border-2 rounded-lg p-4 cursor-pointer transition-all duration-300 relative',
      'hover:-translate-y-1 hover:shadow-lg',
      statusClasses[table.status]
    ]"
    @click="$emit('click', table)"
  >
    <div class="text-lg font-bold text-gray-800 mb-2">{{ table.number }}</div>
    <div class="text-sm text-gray-600 mb-3">{{ table.statusText }}</div>
    <div class="text-xs text-gray-500 leading-relaxed">
      <div v-if="table.playerCount">{{ table.playerCount }}人</div>
      <div v-if="table.startTime">{{ table.startTime }}</div>
      <div v-if="table.amount" class="text-red-500 font-bold">
        ¥{{ table.amount }}
      </div>
    </div>

    <!-- 控制按钮 (在场控模式下显示) -->
    <div v-if="showControls" class="absolute bottom-2 right-2">
      <el-button v-if="table.status === 'idle'" type="primary" size="mini">
        开台
      </el-button>
      <el-button v-if="table.status === 'busy'" type="warning" size="mini">
        结算
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface TableData {
  id: number;
  number: string;
  status: string;
  statusText: string;
  playerCount: number;
  startTime: string;
  amount: number;
}

const props = defineProps<{
  table: TableData;
  showControls?: boolean;
}>();

defineEmits<{
  click: [table: TableData];
}>();

const statusClasses = computed(() => ({
  idle: "border-green-400 bg-gradient-to-br from-blue-50 to-cyan-50",
  busy: "border-red-400 bg-gradient-to-br from-red-50 to-pink-50",
  maintenance: "border-yellow-400 bg-gradient-to-br from-yellow-50 to-amber-50"
}));
</script>
